<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="viewport"
        content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">

    <link rel="stylesheet" href="<?php echo base_url().'public/home/' ?>css/general.css">
        <link rel="stylesheet" href="<?php echo base_url().'public/home/' ?>css/list.css?v=20210912">
    <link rel="stylesheet" href="<?php echo base_url().'public/home/' ?>css/record.css">
    <script src="<?php echo base_url().'public/home/' ?>js/jquery-2.0.3.min.js"></script>
      <!-- 日期选择控件 -->
    <script src='<?php echo base_url().'public/home/mobile_date/' ?>jdate.min.js'></script>
      <script type="text/javascript" src="<?php echo base_url().'public/home/js/' ?>function.js"></script>
        <script type="text/javascript" src="<?php echo base_url().'public/home/alert/js/' ?>alert.js"></script>
        <?php include_once "public/home/html/mobile_select.php"  ?>
    <!-- 下拉框 -->
    <title>督导教学被听课记录</title>
</head>
<style>
    .clear{
        clear: both;
    }
    .item{
        background: #fff;
        padding: 5%;
        font-size: 18px;
        color:#616161;
        margin-bottom: 20px;
    }
    .item-title{
        font-size: 20px;
    }
    .item{
        position: relative;
    }
    .item-tip .tag{
        margin: 10px 0 0 10px;
        padding: 1% 3%;
        border-radius: 15px;
        background-color: #f1f1f1;
        width: auto;
        float: left;
        font-size: 16px;
    }
    .item-tip .score{
        top:20px;
        right: 10px;
        position: absolute;
        color: #3577F7;
    }
    .item-tip .score img{
        width: 25px;
        float: left;
    }
    .item .d1{
        font-size: 16px;
        margin-top: 15px;
    }
    .item .d2{
        font-size: 16px;
        text-align: right;
        border-bottom: 1px solid #bfbbbb;
        padding-bottom:7px
    }
    .item .d3{
        color: #000;
        margin-top: 10px;
    }
    .item .d4{
        font-size: 16px;
        word-wrap: break-word;
    }
    .number{
        float: left;
    }
</style>
<body>

       <div class="top">
        <input type="hidden" name="url" id="url"value="<?php echo base_url() ?>">
        <input type="hidden" name="admin_id" id="admin_id"value="<?php echo $_SESSION[SESS_USER_HOME]['id'] ?>">
        <div class='filter'>
            <div class="filter-item">
                <input type="text" id="date" onchange="getList(true)" value="" placeholder="开始日期"><img src="<?php echo base_url().'public/home/' ?>images/drop_down.png" alt="">
            </div>
            <div class="filter-item">
                <input type="text" id="date1" onchange="getList(true)" value="" placeholder="结束日期"><img src="<?php echo base_url().'public/home/' ?>images/drop_down.png" alt="">
            </div>
            <div class="filter-item">
                <input type="text" id="listen_type" onchange="getList(true)" placeholder="听课类型" readonly><img src="<?php echo base_url().'public/home/' ?>images/drop_down.png" alt="">
            </div>
            <div class="filter-item">
                <input type="text" id="type_char" onchange="getList(true)" placeholder="听课身份" readonly><img src="<?php echo base_url().'public/home/' ?>images/drop_down.png" alt="">
                <input type="hidden" id="type" >
            </div>
        </div>
    </div>

    <div class="min">

    </div>

     <div class="loading" style="text-align:center;"><img src="<?php echo base_url().'public/home/' ?>images/loading1.gif"></div>
    <div class="tip" style="display: none;text-align:center;color: #5d5d5d;height: 30px;line-height:30px;">到底了,没有数据了~</div>




<script>
    // let listen_id = $('#listen_type').val();
    let pageNo = 1;
    let pageSize = 20;
    let have = true;

        $(function () {
        getList();
        getOption()
        // 初始化日期控件
        new Jdate({
              el: '#date',
              format: 'YYYY-MM-DD',
              beginYear: 2019,
              endYear:  new Date().getFullYear(),              
                confirm: function(date) {
                    $("#date").val(date)
                    getList(true)
                    
                },
            })

      // 初始化日期控件
        new Jdate({
              el: '#date1',
              format: 'YYYY-MM-DD',
              beginYear: 2019,
              endYear:  new Date().getFullYear(),              
                confirm: function(date) {
                    $("#date1").val(date)
                    getList(true)
                },
            })
            //分页
        $(window).scroll(function(){
            // scroll at bottom
            if ($(window).scrollTop() + $(window).height() == $(document).height()) {
                pageNo++;
                getList()
            }
        });
    })

    // $(function () {
    //     getList();
    //     $(window).scroll(function(){
    //         // scroll at bottom
    //         if ($(window).scrollTop() + $(window).height() == $(document).height()) {
    //             pageNo++;
    //             getList()
    //         }
    //     });
    // })

    function getList(change=false){
         if(change){
            pageNo=1
            have=true
            $(".min").html('')
          }
          
        if(change){
            if($("#date").val()!='' && $("#date1").val()!=''){
              var  date = $("#date").val()+','+$("#date1").val();
            }else if($("#date").val() =='' && $("#date1").val()!=''){
                  errorAlert('请选择开始日期');
            } else if($("#date").val() !='' && $("#date1").val()==''){
                  errorAlert('请选择结束日期');
            }

        }else{
            if($("#date").val()!='' && $("#date1").val()!=''){
              var  date = $("#date").val()+','+$("#date1").val();
            }else{
                var date = '';
            }      
        }
        if(have){
            $.ajax({
                url: $("#url").val()+"/Home/Attend/coverteachingEvaluationList",
                dataType: "json",
                type: "post",
                data: {
                    pageNo: pageNo,
                    pageSize: pageSize,
                    admin_id: $("#admin_id").val(),
                     type:$("#type").val(),
                    listen_type:$("#listen_type").val(),
                    created:date
                    
                },
                success: function (data) {
                    let t = JSON.parse(data.v);
                    console.log(t);
                    let html =''

                if(status = true){
                    
                    $.each(t.ret, function (k, v) {
                        let a = (pageNo-1)*pageSize+(k+1) + '.' ;


                        html +=`
                        <div class="fk" id="fk" onclick="detail(${v.id})">
                            <div class="name">
                                <p class="sz" style="display: inline;">${a}</p>
                                <p style="display: inline;margin-left:1%;">${v.class_name}</p>
                                <div class="rtl" style="color: #3577F7;display: inline-block;margin-right: 5%;float:right;">
                                    <img src="<?php echo base_url().'public/home/' ?>images/score.png">
                                    <span id="results">${v.score}</span>分
                                </div>
                            </div>
                            <div class="ctg">
                                <div class="category" id="category">
                                    <span>${v.listen_type == null ? '暂无' : v.listen_type}</span>
                                    <span>${v.attendType == null ? '暂无' : v.attendType}</span>
                                </div>
                            </div>
                            <div class="datas"><span>${v.created}</span></div>
                            </div>
                        </div>`
                        // $('.min').append(html);
                    });
                        // 判断是否还有数据
                    if(pageNo==t.totalPage){
                        have=false
                        $(".loading").hide();
                        $(".tip").show();
                    }else if(pageNo>t.totalPage){
                         have=false
                         $(".loading").hide();
                         $(".tip").show();
                    }
                    $('.min').append(html);
                    
                    }else if(status = false){
                        $(".loading").hide();
                            $(".tip").show();
                        }
                },
            });
        }
    }


function detail (aid){
     console.log(aid);
    window.location.href = `<?php echo base_url() . 'Home/Attend/details?aid='?>${aid}`;//传id参数
}

    // 获取筛选项
    function getOption(){
        $.ajax({
            type: "post",
            url: $("#url").val()+"Home/Attend/teachingScreen",
            dataType: "json",
            success: function (data) {
                var t=JSON.parse(data.v)
                console.log(t);
                new MobileSelect({
                    trigger: '#listen_type',
                    title: '听课类型',
                    wheels: [
                                {data: t.listen_type}
                            ],
                    callback:function(indexArr, data){
                        $("#listen_type").val(data)
                        getList(true)
                        
                    }
                });
                
                new MobileSelect({
                    trigger: '#dept',
                    title: '请选择部门',
                    wheels: [
                                {data: t.course_units}
                            ],
                    callback:function(indexArr, data){
                        $("#dept").val(data)
                        getList(true)
                        
                    }
                });
                new MobileSelect({
                    trigger: '#type_char',
                    title: '请选择听课身份',
                    wheels: [
                                {data: t.type}
                            ],
                    callback:function(indexArr, data){
                        $("#type_char").val(data)
                        $("#type").val(parseInt(indexArr)+1)
                        getList(true)
                        
                    }
                });
                // var html,html1=''
                // $.each(t.listen_type, function (k, v) { 
                //     html+=`<option value='${v}'>${v}</option>`
                // });
                // $("#listen_type").append(html)


                // $.each(t.course_units, function (k, v) { 
                //     html1+=`<option value='${v}'>${v}</option>`
                // });
                // $("#dept").append(html1)
            }
        });
    }




</script> 


</body>

</html>